<template>
	<view class="index-view">
		<c-navbar navEvent>
			<template slot="nav">
				<view class="fx-end">
					<view class="index-tab-item" :class="tabIndex===0 ? 'item-active' : ''" @click="changeTab(0)">广场
					</view>
					<view class="fx-center">
						<view class="index-tab-item mleft" :class="tabIndex===1 ? 'item-active' : ''"
							@click="changeTab(1)">
							项目市场
						</view>
						<view class="index-tab-tag" v-if="tabIndex===0 && has_new">新项目</view>
					</view>

				</view>

			</template>
		</c-navbar>
		<swiper :current="tabIndex" :style="'height: ' + swiperHeight + 'px'" :indicator-dots="false" :autoplay="false"
			:duration="300" @change="swiperChange">
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;" refresher-enabled :refresher-triggered="triggered"
					@refresherrefresh="onRefresh" @scrolltolower="scrolltolower">
					<index-tab-one ref="oneRef" :topicList="topicList" :showInput="showInput" @refrash="refrashList"
						@clickAction="clickAction" @showEvent="showInputEvent"
						@closeEvent="closeComment"></index-tab-one>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;" refresher-enabled :refresher-triggered="triggered"
					@refresherrefresh="onRefresh" @scrolltolower="scrollProjecttolower">
					<index-tab-two ref="twoRef" :list="pList" :goodProjectArr="goodProjectArr"></index-tab-two>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- <template v-if="tabIndex===0">
			<index-tab-one ref="oneRef" :topicList="topicList" @refrash="refrashList"></index-tab-one>
		</template>
		<template v-if="tabIndex === 1">
			<index-tab-two ref="twoRef" :goodProjectArr="goodProjectArr"></index-tab-two>
		</template> -->
		<image src="/static/daohang_icon.png" mode="widthFix" class="daohang-icon" @click="toAddTopic"
			v-show="tabIndex===0 && !showInput"></image>
		<view v-show="showInput">
			<c-comment-input ref="commentRef" :topicID="inputInfo.id" :showCount="false" @setBlur="closeComment"
				@done="commentSubmit"></c-comment-input>
		</view>
		<c-user-opration ref="sheetRef" :info="inputInfo" :userId="inputInfo.user_id"
			@refrash="refrashList"></c-user-opration>
	</view>
</template>

<script>
	import indexTabOne from './index-tab1.vue'
	import indexTabTwo from './index-tab2.vue'
	const menuTop = uni.getMenuButtonBoundingClientRect().top
	const menuHeight = uni.getMenuButtonBoundingClientRect().height
	export default {
		components: {
			indexTabOne,
			indexTabTwo
		},
		data() {
			return {
				tabIndex: 0,
				info: {},

				topicList: [], //帖子列表
				page: 1,
				total: 0,

				goodProjectArr: [], //精选项目
				// 项目
				pPage: 1,
				pTotal: 0,
				pList: [],


				// 自制下拉刷新
				triggered: false,
				//评论
				showInput: false,
				inputInfo: {},

				has_new: false, //是否有新项目
				isFirst: true
			}
		},
		onLoad(e) {
			if (e.fuid) {
				uni.setStorageSync('fuid', e.fuid)
			}
			if (e.code) {
				uni.setStorageSync('inviteCode', e.code)
			}
			this.getIndexInfo()
		},
		onShow() {
			uni.$off('indexRefrash')
			// 切换门店
			uni.$on('indexRefrash', info => {
				console.log('indexRefrash')
				this.getIndexInfo()
			})
		},
		beforeDestroy() {
			uni.$off('indexRefrash')
		},
		onShareAppMessage(res) {
			let uid = uni.getStorageSync("userId") || ''
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log('res', res)
				const {
					id,
					img,
					content,
				} = res.target.dataset;
				console.log('iddd', id)
				return {
					title: content,
					path: `/pages/index/talkDetail/talkDetail?id=${id}&fuid=${uid}`,
					imageUrl: img
				}
			} else {
				return {
					title: uni.getStorageSync('share_title') ? uni.getStorageSync('share_title') : '',
					path: '/pages/index/index?fuid=' + uid,
					// imageUrl: uni.getStorageSync('share_image') ? uni.getStorageSync('share_image') : ''
				}
			}
		},
		// 同时支持分享到朋友圈（可选）
		onShareTimeline() {
			let uid = uni.getStorageSync("userId") || ''
			return {
				title: uni.getStorageSync('share_title') ? uni.getStorageSync('share_title') : '',
				// imageUrl: uni.getStorageSync('share_image') ? uni.getStorageSync('share_image') : '',
				query: 'fuid=' + uid // 固定第一条即可
			};
		},
		onPullDownRefresh() {
			this.getIndexInfo()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		methods: {
			refrashList() {
				this.page = 1
				this.getTopicList()
			},
			// 获取首页信息
			getIndexInfo() {
				this.$api
					.requst('/gwc/wxmp/home', {
						fuid: uni.getStorageSync('fuid')
					})
					.then((res) => {
						this.info = res.data
						if (this.isFirst) {
							this.has_new = this.info.has_new
						} else {
							this.has_new = false
						}

						console.log('hasnew', this.has_new)
						uni.removeStorageSync('fuid')
						uni.setStorageSync('share_image', res.data.share_image)
						uni.setStorageSync('share_title', res.data.share_title)
						this.changeTab()
					})
			},
			// 获取帖子列表
			getTopicList() {
				this.$api
					.requst('/gwc/topics', {
						page: this.page
					})
					.then((res) => {
						this.total = res.total
						if (this.page === 1) {
							this.topicList = res.data
						} else {
							res.data.forEach(item => {
								this.topicList.push(item)
							})
						}
					})
			},
			// 获取精选项目
			getGoodProject() {
				this.$api
					.requst('/gwc/projects', {
						type: 1,
						page: 1,
					})
					.then((res) => {
						this.goodProjectArr = res.data
					})
			},
			// 获取所有项目
			getAllProject() {
				this.$api
					.requst('/gwc/projects', {
						page: this.pPage,
					})
					.then((res) => {
						this.pTotal = res.total
						if (this.pPage === 1) {
							this.pList = res.data
						} else {
							res.data.forEach(item => {
								this.pList.push(item)
							})
						}
					})
			},
			// tab切换
			changeTab(index = this.tabIndex) {
				this.tabIndex = index
				this.$nextTick(() => {
					if (this.tabIndex === 0) {
						this.$refs.oneRef.initData(this.info)
						this.page = 1
						this.getTopicList()
					} else {
						// this.$refs.twoRef.initData(this.info)
						this.getGoodProject()
						this.pPage = 1
						this.getAllProject()
					}
				})
				// 获取设备屏幕高度并赋值给swiperHeight
				const systemInfo = uni.getSystemInfoSync();
				this.swiperHeight = systemInfo.windowHeight - menuHeight - menuTop - 6;
				if (!this.isFirst) {
					this.has_new = false
				}
				this.isFirst = false
			},
			// tab滑动切换
			swiperChange(e) {
				if (e.detail.source === 'touch') {
					this.tabIndex = e.detail.current
					this.changeTab()
				}
			},
			// 添加话题
			toAddTopic() {
				if (this.$store.state.islogin) {
					uni.navigateTo({
						url: '/pages/index/addTopic/addTopic?type=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},
			// 下拉刷新
			onRefresh() {
				this.triggered = true;
				this.getIndexInfo()
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
				}, 1500)
			},
			// 广场滚动到底部
			scrolltolower() {
				if (this.topicList.length < this.total) {
					this.page++
					this.getTopicList()
				}
			},
			// 项目滚动到底部
			scrollProjecttolower() {
				if (this.pList.length < this.pTotal) {
					this.pPage++
					this.getAllProject()
				}
			},
			// 点击输入框事件
			showInputEvent(data) {
				this.inputInfo = data
				this.showInput = true
				this.$refs.commentRef.setFocus()
			},
			// 关闭输入框
			closeComment() {
				this.showInput = false
				let page = getCurrentPages()
				let route = page[page.length - 1].route
				if (route === 'pages/index/index' || route === 'pages/workbench/workbench' || route ===
					'pages/mine/mine') {
					setTimeout(() => {
						uni.showTabBar()
					}, 10)
				}
			},
			// 评论成功
			commentSubmit() {
				this.inputInfo.comments_count++
				this.closeComment()
			},
			// 帖子用户操作
			clickAction(data) {
				this.inputInfo = data
				this.$nextTick(() => {
					this.$refs.sheetRef.show()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.index-view {
		// padding-bottom: 30rpx;
		box-sizing: border-box;

		.index-tab-item {
			color: #333333;
			font-size: 32rpx;
		}

		.mleft {
			margin-left: 32rpx;
		}

		.item-active {
			color: #4078E5;
			font-size: 40rpx;
			font-weight: bold;
		}

		.index-tab-tag {
			background: linear-gradient(270deg, #FF3B51 0%, #FF5F5F 100%);
			padding: 4rpx 12rpx;
			font-size: 18rpx;
			font-weight: bold;
			margin-left: 16rpx;
			color: #fff;
			border-radius: 20rpx 14rpx 20rpx 0;
		}

		.daohang-icon {
			position: fixed;
			right: 32rpx;
			bottom: 2%;
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>